<template>
  <div class="CustomVantTimer">
    <div
      class="selectInp"
      :style="{
        borderWidth:hasLabel ? '1px' : '0px',
        marginBottom:hasLabel ? '15px' : '0px',
        paddingBottom:hasLabel ? '8px' : '0px',
      }"
    >
      <div v-if="hasLabel" class="inpLabel">{{ label }}</div>
      <div
        class="inpInner"
        :style="{ width: width,color:vantTimeText ? '#323233' : '#C8C9CC'}"
        @click="openTimePicker"
      >
        <span>{{ vantTimeText ==='' ? pickerTitle : vantTimeText }}</span>
        <i class="el-icon-caret-bottom" />
      </div>
    </div>
    <van-popup
      v-model="vantTimerShow"
      position="bottom"
      get-container="body"
      class="vantTimePopUp"
      :class="{'year-picker ':type==='年'}"
    >
      <div class="vantDateTimeSecondBox">
        <van-datetime-picker
          v-model="vantTimeValue"
          :type="dateTimePickerType"
          :title="pickerTitle"
          :style="{ height: '300px' }"
          :formatter="formatter"
          :min-date="minDateValue"
          :max-date="maxDateValue"
          @confirm="onTimeConfirm"
          @cancel="vantTimerShow=false"
        />
      </div>
      <div class="px-3 py-2 border-top">
        <van-button type="danger" class="w-100" @click="onTimeClear">清空</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { currentTime, formatTime, timeToArray } from '@/utils/dayJs'

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    label: {
      type: String,
      default: '选择时间'
    },
    hasLabel: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: '年月日'
    },
    selectTime: {
      type: [String, Date],
      default: ''
    },
    pickerTitle: {
      type: String,
      default: '选择时间'
    },
    minDate: {
      type: [String, Date],
      default: ''
    },
    maxDate: {
      type: [String, Date],
      default: ''
    },
    isFuture: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vantTimerShow: false,
      vantTimeText: '',
      vantTimeValue: '',
      minDateValue: '',
      maxDateValue: ''
    }
  },
  computed: {
    dateTimePickerType() {
      let type
      if (this.type === '年') {
        type = 'date'
      } else if (this.type === '年月') {
        type = 'year-month'
      } else if (this.type === '年月日') {
        type = 'date'
      } else if (this.type === '年月日时') {
        type = 'datehour'
      } else {
        type = 'datetime'
      }
      return type
    }
  },
  watch: {
    selectTime(nv) {
      this.initTime()
    }
  },
  mounted() {
    this.initTime()
  },
  methods: {
    initTime() {
      this.vantTimeText = this.selectTime !== '' ? formatTime(this.selectTime, this.type) : this.selectTime
    },
    openTimePicker() {
      this.vantTimerShow = true
      this.vantTimeValue = this.selectTime !== '' ? new Date(...timeToArray(this.selectTime)) : new Date()
      this.minDateValue = this.minDate !== '' ? new Date(...timeToArray(this.minDate)) : new Date(2014, 0, 1)
      this.maxDateValue = this.maxDate !== '' ? new Date(...timeToArray(this.maxDate)) : this.isFuture ? new Date(2034, 11, 1) : new Date(...timeToArray(currentTime('年月日时分秒')))
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      if (type === 'hour') {
        return val + '时'
      }
      if (type === 'minute') {
        return val + '分'
      }
      return val
    },
    onTimeConfirm(val) {
      this.vantTimerShow = false
      this.vantTimeText = formatTime(val, this.type)
      this.$emit('update:selectTime', formatTime(val, this.type))
      this.$emit('confirm', formatTime(val, this.type))
    },
    onTimeClear() {
      this.vantTimerShow = false
      this.vantTimeText = ''
      this.$emit('update:selectTime', '')
      this.$emit('confirm', '')
    }
  }
}
</script>

<style lang="scss">
.CustomVantTimer {
  width: auto;
  // height: 35px;
  .selectInp {
    // display: flex;
    // align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(233, 233, 233, 1);
    margin-bottom: 15px;
    .inpLabel {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .inpInner {
      border: 1px solid #e9e9e9;
      height: 35px;
      border-radius: 3px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      cursor: pointer;
      color: #323233;
      span {
        margin-right: 10px;
      }
.el-icon-caret-bottom{
color:#838282;
}
    }
  }
}
// 年
.year-picker {
  .van-picker {
    .van-picker__columns {
      .van-picker-column:not(:first-child) {
        display: none;
      }
    }
  }
}
</style>
